<template>
  <div class="center-content">
    <!--                    ////////////////////////////////////-->
    <!--                    我的活动版面-->
    <section class="self-activty">
      <!--                    活动版面左边部分-->
      <div class="self-left">
        <p class="activity-info act-info-1">组织共发布 <span>8</span> 个活动</p>
        <p class="activity-info act-info-1">您一共参与 <span>2</span> 个活动</p>
        <div class="activity-attend">
          <div class="attend-icon">+</div>
          <div class="attend-text">参加活动</div>
        </div>

        <!--                        这里的time-1类名是显示当前点击的时间条与其他时间条样式区别-->
        <div class="activity-time time-1">2024年2月3日</div>
        <div class="activity-time">2024年2月3日</div>
      </div>

      <div class="activity-content">
        <!--                    活动版面右边部分-->
        <div class="self-right">
          <div class="shown-people">
           <Avatar></Avatar>
<!--            <h2 class="people-id-3">是蛙蛙呀</h2>-->
<!--            <div class="people-identity-2">入党积极分子</div>-->
          </div>
          <div class="time-recording">2024年2月3日·参加了该活动</div>


<!--          具体活动介绍部分-->
          <div class="self-activty-detail">
            <h2 class="activity-detail-title-1">巾帼除冰雪 志愿暖人心</h2>
            <h4 class="activity-detail-title-2">参加日期<span>2023年2月3日</span></h4>
<!--            活动缩略图-->
            <div class="activity-detail-img">

            </div>
            <p class="activity-detail-text">&nbsp;&nbsp;&nbsp;&nbsp;近日，湖北多地出现强雨雪、强寒潮天气，对人民群众生产生活带来不利影响。为深入贯彻习近平总书记对低温雨雪冰冻灾害防范应对工作作出的重要指示精神，第一时间响应省委省政府相关工作部署，全省各级妇联组织和广大巾帼志愿者立即行动，充分发扬巾帼志愿精神，积极投身到除冰铲雪、秩序维护、邻里互助当中，关键时刻展现了荆楚女性的巾帼担当。

              武汉市

              　<br>&nbsp;&nbsp;&nbsp;&nbsp;2月3日至4日，武汉迎来降雪。为应对冰雪天气的突击战，武汉市妇联向全市各级妇联组织、妇联执委、巾帼志愿者等广大妇女姐妹和家庭发出倡议，号召大家当好群众安全的守护者、妇女群众的贴心人、防灾避险的宣传员。全市各级妇联干部、妇联执委、巾帼志愿者积极响应号召，以雪为令，闻雪而动，积极投身于积雪清除、道路除冰、断枝处理、救助群众和走访慰问等志愿服务中。</p>

          </div>

        </div>


        <!--                        页数-->
        <!--  这里页数的html代码被用在后面其他版面里，为节省代码，方便统一，使页数css都放在self-activty.css里面设置，只剩下margin-left和top分别在每个板块单独设置了不同的数据-->
<!--        <div class="self-footer activity-footer">-->
<!--          <ul class="activty-module">-->
<!--            <li>-->
<!--              <div class="activity-button activity-button-now">1</div>-->
<!--            </li>-->
<!--            <li>-->
<!--              <div class="activity-button ">2</div>-->
<!--            </li>-->
<!--            <li>-->
<!--              <div class="activity-button">3</div>-->
<!--            </li>-->
<!--            <li>-->
<!--              <div class="activity-button">下一页></div>-->
<!--            </li>-->
<!--          </ul>-->
<!--        </div>-->
          <Pagination></Pagination>

      </div>
    </section>
  </div>
</template>

<script setup>

import Avatar from "../../../components/avatar/Avatar.vue";
import Pagination from "../../../components/Pagination/Pagination.vue";
</script>

<style scoped>
/*我的活动版面*/
.self-activty{
  width:100%;
  height:100%;
  display: flex;
}
.self-left{
  width:20rem;
  /*height:100%;*/
  padding-top: 3.5rem;
  border-right: 3px solid rgba(156, 0, 0, 1);
  /*background-color: yellow;*/
}

.activity-info{
  text-align: center;
  margin-left: 1.5rem;
  font-size: 12px;
  font-weight: bold;
  color: rgba(156, 0, 0, 1);
  line-height: 3rem;
}
.activity-info span{
  font-size: 16px;
}

.activity-attend{
  display: flex;
  margin-left: 3rem;
  font-weight: 700;
  margin-top: 1rem;
}
.attend-icon{
  width:2.5rem;
  height:2.5rem;
  background-color: rgba(156, 0, 0, 1);
  color:rgba(255, 255, 255, 1);
  cursor: pointer;
  font-size: 2.4rem;
  border-radius: 50%;
  text-align: center;
  line-height: 2.3rem;
  letter-spacing: 0;
}
.attend-text{
  margin-left: 6px;
  font-size: 12px;
  color:rgba(156, 0, 0, 1);
  line-height: 2.5rem;
  letter-spacing: 3px;
}
.activity-time{
  margin-top: 6px;
  width:100%;
  height:3.5rem;
  line-height: 3.5rem;
  text-align: center;
  color:rgba(156, 0, 0, 1);
  font-weight: 700;
  cursor: pointer;
}
.time-1{
  color:rgba(255, 255, 255, 1);
  background-color:rgba(156, 0, 0, 1) ;
}

.self-right{
  width:84rem;
  height:53rem;
  /*background-color: yellow;*/
  margin-top: 4rem;
  margin-left: 2rem;
  padding:13px 0 0 16px;
  border:2px solid rgba(156, 0, 0, 1);
}
.time-recording{
  width:16rem;

  color:rgba(166, 166, 166, 1);
  font-size: 8px;
  position:absolute;
  top: 4rem;
  left:6rem;
}

.self-footer{
}
.activity-footer{
  margin-top: 3rem;
  margin-left: 32rem;
}
.activty-module{
  display: flex;
  /*margin-left: 32rem;*/
}
.activty-module li{
  list-style: none;
  margin-left: 1.2rem;
  cursor: pointer;
  /*margin-top: 2rem;*/
}

.activity-button{
  /*width:3rem;*/
  height:3rem;
  line-height: 3rem;
  text-align: center;
  color:rgba(156, 0, 0, 1);
  background-color:rgba(255, 255, 255, 1);
  border: 2px solid rgba(156, 0, 0, 1);
  border-radius: 5px;
  padding-left:1rem;
  padding-right:1rem;
  letter-spacing: 0px;
}
.activity-button-now{
  color:rgba(255, 255, 255, 1);
  background-color: rgba(156, 0, 0, 1);
}


.people-id-2, .people-id-3 {
  font-size: 1.3rem;
  color: rgba(255, 255, 255, 1);
  font-weight: 700;
  font-family: 黑体;
  position: absolute;
  top: 1.5rem;
  left: 30%;
}

.people-identity-2 {
  /*width:8.5rem;*/
  height: 2rem;
  position: absolute;
  top: 1.3rem;
  left: 65%;
  background-color: rgba(156, 0, 0, 1);
  font-size: 8.5px;
  line-height: 2rem;
  font-weight: bold;
  border-radius: 50px;
  text-align: center;
  /*font-family: "思源黑体";*/
  /*color: rgb(250, 250, 250);*/
  letter-spacing: 2px;
  padding-left: 1rem;
  padding-right: 1rem;
  white-space: nowrap;
  border: 1px solid rgba(255, 255, 255, 1);
}


/*新增具体活动部分*/
.self-activty-detail{
  width: 76rem;
  margin: 0 auto;
  margin-top: 1.5rem;
}
.activity-detail-title-1{
  text-align: center;
  color: rgba(156, 0, 0, 1);
  font-size: 1.6rem;
  letter-spacing: 2px;
  font-weight: bolder;
}
.activity-detail-title-2{
  font-size: 8px;
  padding-left: 36rem;
  margin: 0.8rem 0;
  color:rgba(156, 0, 0, 1);
  letter-spacing: 2px;
}
.activity-detail-img{
  width: 75rem;
  height:23rem;
  background-repeat: no-repeat;
  background-size: cover;
  background-image: url("src/assets/images/activty-img.png");
}
.activity-detail-text{
  font-size: 1.2rem;
  line-height: 2.5rem;
  color:rgba(0, 0, 0, 1);
}

</style>
